<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数柯里化</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Abc extends React.Component{
           // 初始化状态
           /*
                高阶函数：如果一个函数符合下面的规范中的任何一个,这个函数就是高阶函数
                        1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数
                        2.若A函数，调用的返回值仍然是一个函数,那么A就是高阶函数
                        常见高阶函数：Promise，setTimeOut，arr.map()...
                函数的柯里化：
                        通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码方式
            */
           state = {
               username:'',
               password:''
           }

           saveForm=(dataType)=>{
              // 注意this.xxx()这是函数返回值,this.xxx这是函数(方法)
              console.log('dataType',dataType) // 传入的数据类型
               return (event)=>{
                    // console.log([dataType],event.target.value)
                   // 注意:这里如果没有[]则会直接解析为新的key并往state加入
                   this.setState({[dataType]:event.target.value})
               }
           }

           handleSubmit=(event)=>{
               event.preventDefault()
               const {username,password} = this.state
               alert(`用户名:${username},密码:${password}`)
           }


           render(){
               return (
                   <form action="" onSubmit={this.handleSubmit}>
                       用户名:<input onChange={this.saveForm('username')} type="text"/>
                       密码:<input onChange={this.saveForm('password')} type="password" />
                       <button>登录</button>
                   </form>
               )
           }
       }
        ReactDOM.render(<Abc/>,document.getElementById('app'))




    </script>
</body>
</html>
